import React, { useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
import {
  useMediaQuery,
  Grid,
  Typography,
  TextField,
  Button, IconButton,
  Divider, Menu, MenuItem,
  Box,
  Tab,
  Tabs
} from '@material-ui/core';
import { Image } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { Section } from 'components/organisms';
import { v4 as uuidv4 } from 'uuid'
import { Editor, EditorState } from 'draft-js';
import { DropzoneArea } from 'material-ui-dropzone'


function ImageDropzone(props) {

  const [files, setFiles] = useState([]);

  const handleChange = (files) => {
    setFiles(files);
    props.onChangeFiles(files)
  };

  return (
    <DropzoneArea
      initialFiles={props.value}
      filesLimit="10"
      maxFileSize="3000000"
      dropzoneText="Drag and drop images here or click (Max size: 3MB)"
      acceptedFiles={ ['image/jpeg', 'image/png'] }
      onChange={handleChange}
    />
  );
}


function VideoDropzone(props) {

  const [files, setFiles] = useState([]);

  const handleChange = (files) => {
    setFiles(files);
    props.onChangeFiles(files)
  };

  return (
    <DropzoneArea
      initialFiles={props.value}
      filesLimit="1"
      maxFileSize="20000000"
      dropzoneText="Drag and drop a video here or click (Max size: 20MB)"
      acceptedFiles={ ['video/mp4'] }
      onChange={handleChange}
    />
  );
}


const MediaContent = (props) => {
  const { item } = props;
  const [isShown, setIsShown] = useState(false);

  const buttonAbsStyle = {
    position: 'absolute',
    top: 0,
    right: 0,
    zIndex: 1000
  }

  const onChangeTextField = (value) => {
    props.onChangeMedia(item.id, value)
  }

  const onChangeFiles = (value) => {
    props.onChangeMedia(item.id, value)
  }

  if (item.type == 'text') {
    return <Grid key={props.key} item xs={12} data-aos="fade-up"
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}>
      {isShown && <Button 
        aria-label="delete"
        variant="contained"
        style={buttonAbsStyle}
        onClick={e => {
          e.stopPropagation()
          props.deleteMedia(item.id)}}>
        <DeleteIcon />
      </Button>}
      <TextField
        placeholder="Add text"
        variant="outlined"
        name={item.id}
        fullWidth
        multiline
        value={item.value}
        onChange={ (e) => {
          onChangeTextField(e.target.value)}}
        rows={4}
      />
    </Grid>

  } else if (item.type == 'image') {
    return <Grid key={props.key} item xs={12} data-aos="fade-up"
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}>
      {isShown && <Button aria-label="delete"
      variant="contained"
      style={buttonAbsStyle}
      onClick={e => {
        e.stopPropagation()
        props.deleteMedia(item.id)} }>
        <DeleteIcon />
      </Button>}
      <ImageDropzone 
        onChangeFiles={onChangeFiles}
        value={item.value} />
    </Grid>

  } else if (item.type == 'video') {
    return <Grid key={props.key} item xs={12} data-aos="fade-up"
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}>
      {isShown && <Button aria-label="delete"
      variant="contained"
      style={buttonAbsStyle}
      onClick={e => {
        e.stopPropagation()
        props.deleteMedia(item.id)} }>
        <DeleteIcon />
      </Button>}
      <VideoDropzone 
        onChangeFiles={onChangeFiles}
        value={item.value} />
    </Grid>

  } else if (item.type == 'youtube') {
    return <Grid key={props.key} item xs={12} data-aos="fade-up"
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}>
      {isShown && <Button aria-label="delete"
      variant="contained"
      style={buttonAbsStyle}
      onClick={e => {
        e.stopPropagation()
        props.deleteMedia(item.id)} }>
        <DeleteIcon />
      </Button>}
      <TextField
        placeholder="Add youtube link"
        variant="outlined"
        size="medium"
        name={item.id}
        onChange={ (e) => {
          onChangeTextField(e.target.value)}}
        fullWidth
        type="text"
        value={item.value}
      />
    </Grid>
    
  } else {
    return <Grid key={props.key} item xs={12} data-aos="fade-up"
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}>
      {isShown && <Button aria-label="delete"
      variant="contained"
      style={buttonAbsStyle}
      onClick={e => {
        e.stopPropagation()
        props.deleteMedia(item.id)}}>
        <DeleteIcon />
      </Button>}
      <TextField
        placeholder="Enter Text"
        variant="outlined"
        size="medium"
        name={item.id}
        onChange={ (e) => {
          onChangeTextField(e.target.value)}}
        fullWidth
        type="text"
        value={item.value}
      />
    </Grid>
  }
}

export default MediaContent;